草庐IT

php - svg 到按需图像

全部标签

javascript - 如果需要使用 javascript 旋转图像

我有一个预览点可以在上传前显示图像的预览,问题是当您从手机中选择图像时它会出现在侧面。需要旋转的图片怎么旋转?我的javascript显示预览:functionreadURL(input){if(input.files&&input.files[0]){varreader=newFileReader();reader.onload=function(e){$('#blah').attr('src',e.target.result)};reader.readAsDataURL(input.files[0]);}}和html 最佳答案

javascript - 以编程方式将 <a> 添加到 SVG 路径对象

我在使用JavaScript将anchor标记包裹在SVG中的path对象时遇到了问题。所以,这是我的SVG(缩短版,只有两条路径),带有ids:“纹状体1”和“纹状体2”对于ID为“striatum1”的路径,我对链接进行了硬编码,对于ID为“striatum2”的路径,我想以编程方式生成链接。首先,请看一下SVG(brain.svg):image/svg+xml我使用命令将SVG加载到我的HTML文件中:YourbrowserdoesnotsupportSVG现在我使用JavaScript和DOM操作来简单地用anchor包裹路径,就像这样:varbrain=document.ge

javascript - 通过 AWS Ruby SDK 将 Base64 图像数据上传到 S3

我有一个拖放功能,可以将拖放到其上的文件转换为Base64数据。之前是上传到Imgur,Imgur的API支持Base64上传,现在正在努力迁移到AmazonS3。我看过examplesofpeopleusingXMLHTTPrequests和CORS将数据上传到S3,我正在使用Amazon'sAWSS3SDKgem以避免必须签署政策和其他事情,因为gem为我做了这些。所以我所做的是将Base64数据发送到使用gem上传到S3的本地Controller方法。我看到的其他使用Ajax的帖子显示S3支持原始数据上传,但gem似乎不支持,因为每当我查看上传时我都会看到损坏的图像。我上传不正确

javascript - 如何在运动路径上有效地反转 SVG (SMIL) 动画?

我正在尝试确定如何有效地反转此SVG动画(使用SMIL),它使用animateMotion和path上的d属性元素。我需要动画围绕形状逆时针运行。当前动画可以查here相关代码如下。document.getElementById("svgobject").pauseAnimations();STARTSTOP我明白我可以手动反转SVG路径数据命令,包括moveto(M,m)、lineto(L,l)、curveto(C,c)等。考虑到我需要反转的路径坐标数量(除了这个动画中的那些),我正在尝试确定是否有更有效的方法来执行此操作。 最佳答案

javascript - fengyuanchen Cropper - 如果旋转,如何使图像适合 Canvas ?

我浏览了fengyuanchen的cropper文档。如果旋转,我希望图像默认适合Canvas。但我找不到实现这一目标的方法。知道如何实现此功能吗?我希望它成为默认值:link在此处查看问题演示:link 最佳答案 我修复了此行为,但出于我的特殊需要。我只需要一个旋转按钮,它可以将图像旋转90°。出于其他目的,您可以扩展/更改我的修复。它通过动态更改cropbox尺寸以“严格”模式工作。这是我想要旋转图像时调用的函数。啊,另外,错位错误也已修复。var$image;functioninitCropper(){$image=$('.i

javascript - 如何在 fabric.js 中用 Canvas 保存图像

我正在创建一个T恤定制应用程序,其中我使用CSS将Canvas放在图像上,但问题是将该图像保存为Canvas。toDataURL只给出了Canvas区域的一部分,但我想要整个图像。StackOverflow上有其他解决方案,但它们没有解决这个问题。 最佳答案 你好,您必须创建一个包含消息的文本对象的图像对象(T恤)。为此,使用fabric.Image.fromURL()函数加载图像,并在函数内部创建一个文本对象,用于显示T恤消息。因此,您的图像和文本属于一个组对象。每次您要加载新文本时,您都调用loadText函数并更改文本对象。我

javascript - 将 Canvas 图像作为 multipart/form-data 类型的 Blob 上传到 facebook

我正在尝试使用facebookapi从我保存在页面上的Canvas上传图像:varfile=dataURItoBlob(canvas.toDataURL('image/jpeg',1.0))FB.api('/me/photos','POST',{source:file,message:'photodescription'},function(response){console.log(response)})这是blob转换器:functiondataURItoBlob(dataURI){varbyteString=atob(dataURI.split(',')[1]);varab=ne

javascript - 仅当 Angular 中存在图像时才显示图像元素

我有两个兄弟元素。一个是图像,另一个是div。如果图像存在,我想显示图像元素;如果图像不存在,我想显示div元素。我的元素看起来像{{product.img}}product.img的结果类似于/assets/images/prod.jpg。因为这是一个字符串,所以ng-show将始终为真,并且将显示图像标签。因此,如果图像不存在,它将显示为损坏的图像。所以基本上我想要的是,如果图像不存在,则隐藏图像标签并显示div,反之亦然。我试过像这样的javascript函数$scope.imageExists=function(src){varimage=newImage();image.sr

javascript - Webpack - 使用文件加载器需要图像

我正在为我的React应用程序使用Webpack。我在我的webpack配置中安装了“File-loader”和“Url-loader”。但是,我不确定如何将图像链接到我的组件。我将图像的“src”保存在“Data.js”文件中,从那里我将图像数据传递给react组件。我的webpack.config.js:...constPATHS={app:path.join(__dirname,"app"),build:path.join(__dirname,"build")};constcommon={entry:{app:PATHS.app},output:{path:PATHS.build

javascript - 如何从填充的 SVG 路径中删除形状

我有这个fiddle:https://jsfiddle.net/thatOneGuy/1spn8nne/1/这有两条路径,目前,它们只是矩形,但实际上是复杂的形状。我使用此代码创建了两个带有“孔”的矩形:createRects(dataPointsPath2,'blue');createHoles(dataPointsCircle2);createRects(dataPointsPath1,'red');createHoles(dataPointsCircle1);我需要的是从填充路径中移除孔,以便您可以看到它后面的矩形。如何从填充路径中删除形状(圆形)?编辑我刚刚意识到,剪辑路径可能